<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../vender/animate@3.5.0.min.css">
    <style>
        .list-complete-item {
            transition: all 1s;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div id="app">
    <my-component :list="list"></my-component>
</div>


</body>
<script src="../../vender/vue@2.4.2.js"></script>

<script>
    Vue.component('my-component',{
        template:`<div id="list" class="demo">
                    <input type="text" v-model="query">
                    <transition-group
                        name="list-complete"
                        tag="ul"
                        :css="false"
                    >
                        <li class="list-complete-item"
                            v-for="(item,idx) of computedList"
                            :key="item.msg"
                            :data-index="idx"
                        >
                        {{item.msg}}
                        </li>
                    </transition-group>
                </div>`,
        props:['list'],
        data:()=>({query:''}),
        computed:{
            computedList: function () {
                var vm=this;
                var list=this.list.filter(item=>item.msg.toLowerCase().indexOf(vm.query.toLowerCase())!==-1);
                console.log('computedList:',list);
                return list;
            }
        }
    });

    var app=new Vue({
        el:'#app',
        data:{
            query:'',
            list:[
                {msg:'Bruce Lee'},
                {msg:'Jackie Chan'},
                {msg:'Jet Li'},
                {msg:'Kung Fury'}
            ]
        }
    });

</script>
</html>